<template>
    <view class="banner-box" :style="{ height: box_height + 'px' }" :animation="animationData">
        <image class="banner" :src="src" mode="widthFix" @load="loaded"></image>
    </view>
</template>

<script>
export default {
    props: {
        // 图片地址
        src: {
            type: String,
            default: ''
        },
        // 设计图高度
        height: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            box_height: 0,
            loading: true,
            animation: {},
            animationData: {}
        };
    },
    created() {
        this.box_height = parseInt(this.rpxToPx(this.height));
        this.animation = uni.createAnimation({
            duration: 1000,
            timingFunction: 'ease',
            delay: 0
        });
    },
    methods: {
        loaded(event) {
            this.loading = false;
            this.animation.opacity(1).step();
            this.animationData = this.animation.export();
            this.$emit('on-load', event);
        },
        rpxToPx(rpx) {
            return (rpx * uni.getSystemInfoSync().windowWidth) / 750;
        }
    }
};
</script>

<style lang="scss" scoped>
.banner-box {
    width: 100%;
    height: 320rpx;
    opacity: 0.2;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #e6e6e6;
}

.banner {
    width: 100%;
    height: auto;
}
</style>
